<template>
  <div class="reservation-container">
    <el-card class="page-header-card">
      <div class="page-header">
        <div class="page-title">
          <h2>预约车位</h2>
          <p>提交预约申请并管理您的预约记录</p>
        </div>
      </div>
    </el-card>
    
    <el-row :gutter="20">
      <!-- 预约表单 -->
      <el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="6">
        <el-card class="form-card">
          <template #header>
            <div class="card-header">
              <span>提交预约</span>
            </div>
          </template>
          
          <el-form 
            ref="reservationFormRef" 
            :model="reservationForm" 
            :rules="reservationRules"
            label-position="top"
          >
            <!-- 车辆选择 -->
            <el-form-item prop="vehicle_id" label="选择车辆">
              <el-select 
                v-model="reservationForm.vehicle_id" 
                placeholder="请选择车辆"
                style="width: 100%"
                @change="handleVehicleChange"
              >
                <el-option 
                  v-for="vehicle in vehicles" 
                  :key="vehicle.id" 
                  :label="`${vehicle.plateNumber} - ${vehicle.vehicleBrand} ${vehicle.vehicleModel}`" 
                  :value="vehicle.id"
                />
              </el-select>
            </el-form-item>
            
            <!-- 停车场选择 -->
            <el-form-item prop="parking_lot_id" label="选择停车场">
              <el-select 
                v-model="reservationForm.parking_lot_id" 
                placeholder="请选择停车场"
                style="width: 100%"
                :disabled="!reservationForm.vehicle_id"
                @change="handleLotChange"
              >
                <el-option 
                  v-for="lot in parkingLots" 
                  :key="lot.id" 
                  :label="lot.name" 
                  :value="lot.id"
                />
              </el-select>
            </el-form-item>
            
            <!-- 如果从停车场页面跳转时已有车位ID，直接显示 -->
            <el-form-item v-if="preSelectedSpace" label="已选车位">
              <el-input 
                v-model="preSelectedSpace.space_number" 
                disabled
              />
            </el-form-item>
            
            <!-- 日期选择 -->
            <el-form-item prop="date" label="预约日期">
              <el-date-picker
                v-model="reservationForm.date"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                :disabled="!reservationForm.parking_lot_id && !preSelectedSpace"
                :disabledDate="disabledDate"
                @change="handleDateChange"
              />
            </el-form-item>
            
            <!-- 时间段选择 -->
            <el-form-item prop="time_range" label="预约时间段">
              <el-select
                v-model="reservationForm.time_range"
                placeholder="选择时间段"
                style="width: 100%"
                :disabled="!reservationForm.date"
              >
                <el-option
                  v-for="(slot, index) in timeSlots"
                  :key="index"
                  :label="`${slot.start} - ${slot.end}`"
                  :value="`${slot.start}-${slot.end}`"
                />
              </el-select>
            </el-form-item>
            
            <!-- 备注 -->
            <el-form-item prop="remark" label="备注信息">
              <el-input
                v-model="reservationForm.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息（选填）"
              />
            </el-form-item>
            
            <!-- 费用预估 -->
            <div class="fee-estimate" v-if="estimatedFee > 0">
              <span>预估费用: </span>
              <span class="fee-amount">¥{{ estimatedFee.toFixed(2) }}</span>
            </div>
            
            <!-- 提交按钮 -->
            <el-form-item>
              <el-button 
                type="primary" 
                @click="submitReservation" 
                :loading="submitting"
                style="width: 100%"
              >提交预约申请</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <!-- 预约记录 -->
      <el-col :xs="24" :sm="24" :md="14" :lg="16" :xl="18">
        <el-card class="list-card">
          <template #header>
            <div class="card-header">
              <span>预约记录</span>
              <div class="filter-actions">
                <el-select 
                  v-model="filterStatus" 
                  placeholder="状态筛选" 
                  clearable
                  @change="handleFilterChange"
                  style="width: 120px; margin-right: 10px;"
                >
                  <el-option label="全部" value="" />
                  <el-option label="待审核" :value="0" />
                  <el-option label="已确认" :value="1" />
                  <el-option label="已使用" :value="2" />
                  <el-option label="已取消" :value="3" />
                  <el-option label="已拒绝" :value="4" />
                </el-select>
                
                <el-button 
                  type="primary" 
                  @click="fetchReservations"
                  :icon="Refresh"
                >刷新</el-button>
              </div>
            </div>
          </template>
          
          <div v-loading="loading">
            <template v-if="!loading">
              <div v-if="reservations && reservations.length > 0" class="reservation-list">
                <div 
                  v-for="item in reservations" 
                  :key="item.id" 
                  class="reservation-item"
                  :class="getStatusClass(item.status)"
                >
                  <div class="item-header">
                    <div class="item-title">
                      <span class="space-number">{{ item.spaceNumber }}</span>
                      <span class="plate-number">{{ item.plateNumber }}</span>
                      <el-tag size="small" :type="getStatusType(item.status)">
                        {{ getStatusText(item.status) }}
                      </el-tag>
                    </div>
                    <div class="item-time">
                      <span>{{ formatDateTime(item.startTime) }} - {{ formatTime(item.endTime) }}</span>
                    </div>
                  </div>
                  
                  <div class="item-content">
                    <div class="item-details">
                      <div class="detail-item">
                        <span class="detail-label">预约编号:</span>
                        <span class="detail-value">{{ item.id }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">车位:</span>
                        <span class="detail-value">{{ item.spaceNumber }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">车牌号:</span>
                        <span class="detail-value">{{ item.plateNumber }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">预约时间:</span>
                        <span class="detail-value">{{ formatDateTime(item.startTime) }} - {{ formatTime(item.endTime) }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">费用:</span>
                        <span class="detail-value">¥{{ item.fee.toFixed(2) }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">支付状态:</span>
                        <el-tag size="small" :type="item.isPaid ? 'success' : 'warning'">
                          {{ item.isPaid ? '已支付' : '未支付' }}
                        </el-tag>
                      </div>
                      <div class="detail-item" v-if="item.remark">
                        <span class="detail-label">备注:</span>
                        <span class="detail-value">{{ item.remark }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">创建时间:</span>
                        <span class="detail-value">{{ formatDateTime(item.createdAt) }}</span>
                      </div>
                    </div>
                    
                    <div class="item-actions">
                      <el-button 
                        v-if="item.status === 0 || item.status === 1" 
                        type="danger" 
                        size="small"
                        @click="cancelReservationAction(item.id)"
                      >取消预约</el-button>
                      <el-button 
                        v-if="item.status === 1 && !item.isPaid" 
                        type="primary" 
                        size="small"
                        @click="payReservation(item)"
                      >立即支付</el-button>
                      <el-button 
                        v-if="item.status === 1 && item.isPaid" 
                        type="success" 
                        size="small"
                        plain
                      >已支付</el-button>
                      <el-button 
                        v-if="item.status === 1 && item.isPaid" 
                        type="primary" 
                        size="small"
                        @click="handleManualEntry(item)"
                      >手动入场</el-button>
                    </div>
                  </div>
                </div>
              </div>
              
              <el-empty v-else description="暂无预约记录"></el-empty>
            </template>
            
            <!-- 分页 -->
            <div class="pagination-container" v-if="total > 0">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import { 
  getUserReservations, 
  createReservation, 
  cancelReservation, 
  getReservationDetail,
  getAvailableTimeSlots,
  getReservationStats
} from '@/api/reservation'
import { getUserVehicles } from '@/api/user'
import { getParkingLotList } from '@/api/parking'
import { createPayment } from '@/api/payment'
import { createParkingRecord } from '@/api/parkingRecord'

// 路由
const route = useRoute()
const router = useRouter()

// 默认选中的车位（从停车场页面跳转过来时）
const preSelectedSpace = ref(null)

// 表单
const reservationFormRef = ref(null)
const reservationForm = reactive({
  vehicle_id: '',
  parking_lot_id: '',
  date: '',
  time_range: '',
  remark: ''
})

// 车辆、停车场和时间槽数据
const vehicles = ref([])
const parkingLots = ref([])
const timeSlots = ref([])

// 预约记录
const reservations = ref([])
const stats = ref(null)
const loading = ref(false)
const submitting = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const filterStatus = ref('')

// 预估费用
const estimatedFee = ref(0)

// 校验规则
const reservationRules = {
  vehicle_id: [
    { required: true, message: '请选择车辆', trigger: 'change' }
  ],
  parking_lot_id: [
    { required: true, message: '请选择停车场', trigger: 'change' }
  ],
  date: [
    { required: true, message: '请选择预约日期', trigger: 'change' }
  ],
  time_range: [
    { required: true, message: '请选择预约时间段', trigger: 'change' }
  ]
}

// 禁用过去的日期
const disabledDate = (time) => {
  // 获取当前时间的午夜时刻（本地时区）
  const now = new Date()
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
  
  // 将要比较的时间也转换为午夜时刻
  const compareDate = new Date(time.getFullYear(), time.getMonth(), time.getDate())
  
  console.log('日期比较:', {
    now: now.toLocaleString(),
    today: today.toLocaleString(),
    compareDate: compareDate.toLocaleString(),
    isDisabled: compareDate < today
  })
  
  return compareDate < today
}

// 获取车辆列表
const fetchVehicles = async () => {
  try {
    const res = await getUserVehicles()
    vehicles.value = res.data
    
    // 如果有车辆，默认选择第一个
    if (vehicles.value.length > 0 && !reservationForm.vehicle_id) {
      reservationForm.vehicle_id = vehicles.value[0].id
      await handleVehicleChange(vehicles.value[0].id)
    }
  } catch (error) {
    ElMessage.error('获取车辆列表失败')
  }
}

// 获取停车场列表
const fetchParkingLots = async () => {
  try {
    const res = await getParkingLotList({
      page: 1,
      size: 100
    })
    if (res.code === 200 && res.data && res.data.records) {
      // 只显示开放的停车场
      parkingLots.value = res.data.records.filter(lot => lot.status === 1)
      
      // 如果URL中有车位参数，自动选择对应的停车场
      if (preSelectedSpace.value && parkingLots.value.length > 0) {
        const defaultLot = parkingLots.value[0]
        if (defaultLot) {
          reservationForm.parking_lot_id = defaultLot.id
          console.log('已自动选择停车场:', defaultLot.name)
        }
      }
    } else {
      parkingLots.value = []
      console.warn('获取停车场列表失败：', res.message)
      ElMessage.warning('获取停车场列表失败：' + (res.message || '未知错误'))
    }
  } catch (error) {
    console.error('获取停车场列表失败', error)
    parkingLots.value = []
    ElMessage.error('获取停车场列表失败：' + (error.message || '服务器错误'))
  }
}

// 获取预约记录
const fetchReservations = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      status: filterStatus.value || undefined
    }
    
    const res = await getUserReservations(params)
    console.log('获取预约记录响应:', res)
    
    if (res.code === 200 && res.data) {
      // 处理分页数据
      if (res.data.records) {
        reservations.value = res.data.records.map(record => ({
          ...record,
          // 确保所有必要的字段都存在，并使用正确的驼峰命名
          id: record.id,
          vehicleId: record.vehicleId,
          parkingLotId: record.parkingLotId,
          parkingSpaceId: record.parkingSpaceId,
          spaceNumber: record.spaceNumber,
          plateNumber: record.plateNumber,
          startTime: record.startTime,
          endTime: record.endTime,
          status: record.status,
          fee: record.fee || 0,
          isPaid: record.isPaid === 1,
          remark: record.remark,
          createdAt: record.createdAt
        }))
        total.value = res.data.total
        currentPage.value = res.data.current
        pageSize.value = res.data.size
        
        console.log('处理后的预约记录:', reservations.value)
      } else {
        console.warn('未识别的数据结构:', res.data)
        reservations.value = []
        total.value = 0
      }
    } else {
      reservations.value = []
      total.value = 0
      console.warn('获取预约记录失败：', res.message)
    }
  } catch (error) {
    console.error('获取预约记录失败', error)
    reservations.value = []
    total.value = 0
    ElMessage.error('获取预约记录失败')
  } finally {
    loading.value = false
  }
}

// 获取统计信息
const fetchStats = async () => {
  try {
    const res = await getUserReservations({
      type: 'stats'
    })
    if (res.code === 200 && res.data) {
      stats.value = {
        total: res.data.total || 0,
        pending: res.data.pending || 0,
        confirmed: res.data.confirmed || 0,
        upcoming: res.data.upcoming || 0,
        used: res.data.used || 0,
        canceled: res.data.canceled || 0,
        rejected: res.data.rejected || 0
      }
    } else {
      console.warn('获取统计信息失败：', res.message)
      stats.value = null
    }
  } catch (error) {
    console.error('获取统计信息失败', error)
    stats.value = null
  }
}

// 处理车辆变更
const handleVehicleChange = async (vehicleId) => {
  if (!vehicleId) return
  
  const vehicle = vehicles.value.find(v => v.id === vehicleId)
  if (vehicle) {
    reservationForm.plate_number = vehicle.plateNumber
  }
}

// 处理停车场变更
const handleLotChange = async (lotId) => {
  if (!lotId) return
  
  // 如果切换停车场，清空时间选择
  reservationForm.date = ''
  reservationForm.time_range = ''
  timeSlots.value = []
}

// 处理日期变更
const handleDateChange = async (date) => {
  if (!date) {
    timeSlots.value = []
    reservationForm.time_range = ''
    return
  }
  
  try {
    // 获取可用时间段
    const formattedDate = date.toISOString().split('T')[0]
    let spaceId = preSelectedSpace.value ? preSelectedSpace.value.id : null
    let parkingLotId = reservationForm.parking_lot_id
    
    const res = await getAvailableTimeSlots({
      date: formattedDate,
      spaceId: spaceId,
      parkingLotId: parkingLotId
    })
    
    if (res.code === 200 && res.data) {
      // 确保返回的数据是数组
      timeSlots.value = Array.isArray(res.data) ? res.data : []
      console.log('获取到的时间段:', timeSlots.value)
    } else {
      timeSlots.value = []
      ElMessage.warning('获取可用时间段失败：' + (res.message || '未知错误'))
    }
    
    // 如果没有可用时间段，显示提示
    if (timeSlots.value.length === 0) {
      ElMessage.info('当前日期没有可用的预约时间段')
    }
    
    // 重置时间段选择
    reservationForm.time_range = ''
    // 重置预估费用
    estimatedFee.value = 0
  } catch (error) {
    console.error('获取可用时间段失败:', error)
    timeSlots.value = []
    ElMessage.error('获取可用时间段失败：' + (error.message || '服务器错误'))
  }
}

// 计算预估费用
const calculateEstimatedFee = () => {
  if (!reservationForm.time_range) {
    estimatedFee.value = 0
    return
  }
  
  const [startTime, endTime] = reservationForm.time_range.split('-')
  const startHour = parseInt(startTime.split(':')[0])
  const endHour = parseInt(endTime.split(':')[0])
  const hours = endHour - startHour
  
  // 假设费率为 5 元/小时
  estimatedFee.value = hours * 5
}

// 格式化预约时间
const formatReservationDateTime = (dateStr, timeStr) => {
  // 解析时间
  const [hours, minutes] = timeStr.split(':')
  return `${dateStr} ${hours}:${minutes}:00`
}

// 提交预约
const submitReservation = async () => {
  await reservationFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    submitting.value = true
    
    try {
      const vehicle = vehicles.value.find(v => v.id === reservationForm.vehicle_id)
      if (!vehicle) {
        ElMessage.error('车辆信息获取失败')
        return
      }
      
      // 处理时间段
      const [startTime, endTime] = reservationForm.time_range.split('-')
      
      // 获取选择的日期的年月日
      const selectedDate = reservationForm.date
      const year = selectedDate.getFullYear()
      const month = String(selectedDate.getMonth() + 1).padStart(2, '0')
      const day = String(selectedDate.getDate()).padStart(2, '0')
      const dateStr = `${year}-${month}-${day}`
      
      console.log('预约日期处理:', {
        selectedDate: selectedDate,
        dateStr: dateStr,
        startTime: startTime,
        endTime: endTime
      })
      
      const startDateTime = formatReservationDateTime(dateStr, startTime)
      const endDateTime = formatReservationDateTime(dateStr, endTime)
      
      console.log('格式化后的时间:', {
        startDateTime,
        endDateTime
      })
      
      // 验证时间是否为未来时间
      const now = new Date()
      const startDate = new Date(startDateTime)
      const endDate = new Date(endDateTime)
      
      console.log('时间验证:', {
        now: now.toLocaleString(),
        startDate: startDate.toLocaleString(),
        endDate: endDate.toLocaleString()
      })
      
      if (startDate <= now) {
        ElMessage.error('预约开始时间必须是未来时间')
        return
      }
      
      if (endDate <= now) {
        ElMessage.error('预约结束时间必须是未来时间')
        return
      }
      
      let parkingSpaceId, spaceNumber
      
      if (preSelectedSpace.value) {
        parkingSpaceId = preSelectedSpace.value.id
        spaceNumber = preSelectedSpace.value.space_number
      } else {
        ElMessage.error('请先选择车位')
        return
      }
      
      const reservationData = {
        vehicleId: vehicle.id,
        parkingLotId: reservationForm.parking_lot_id,
        parkingSpaceId: parkingSpaceId,
        spaceNumber: spaceNumber,
        plateNumber: vehicle.plateNumber,
        startTime: startDateTime,
        endTime: endDateTime,
        fee: estimatedFee.value,
        remark: reservationForm.remark
      }
      
      console.log('提交预约数据:', reservationData)
      const res = await createReservation(reservationData)
      
      if (res.code === 200) {
        ElMessage.success('预约申请提交成功，请等待审核')
        
        // 重置表单
        reservationFormRef.value.resetFields()
        reservationForm.time_range = ''
        timeSlots.value = []
        estimatedFee.value = 0
        
        // 刷新列表
        await fetchReservations()
        await fetchStats()
      } else {
        ElMessage.error(res.message || '预约申请提交失败')
      }
    } catch (error) {
      console.error('预约申请提交失败:', error)
      ElMessage.error(error.response?.data?.message || error.message || '预约申请提交失败')
    } finally {
      submitting.value = false
    }
  })
}

// 取消预约
const cancelReservationAction = async (id) => {
  try {
    await ElMessageBox.confirm('确定要取消此预约吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await cancelReservation(id)
    ElMessage.success('预约已取消')
    
    // 刷新列表
    await fetchReservations()
    await fetchStats()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '取消预约失败')
    }
  }
}

// 支付预约
const payReservation = async (reservation) => {
  try {
    // 创建支付订单
    const paymentData = {
      paymentType: 1, // 1表示预约费
      recordId: reservation.id,
      amount: reservation.fee,
      remark: `预约费支付-${reservation.spaceNumber}`
    }
    
    const res = await createPayment(paymentData)
    if (res.code === 200) {
      // 跳转到支付页面
      router.push({
        path: '/user/payment',
        query: {
          orderNumber: res.data.orderNumber,
          type: 'reservation'
        }
      })
    } else {
      ElMessage.error(res.message || '创建支付订单失败')
    }
  } catch (error) {
    console.error('创建支付订单失败:', error)
    ElMessage.error('创建支付订单失败，请重试')
  }
}

// 处理筛选变更
const handleFilterChange = () => {
  currentPage.value = 1
  fetchReservations()
}

// 处理分页
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchReservations()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchReservations()
}

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return ''
  const date = new Date(dateTimeStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).replace(/\//g, '-')
}

// 格式化时间
const formatTime = (dateTimeStr) => {
  if (!dateTimeStr) return ''
  const date = new Date(dateTimeStr)
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 根据状态获取类名
const getStatusClass = (status) => {
  switch (status) {
    case 0: return 'status-pending'
    case 1: return 'status-confirmed'
    case 2: return 'status-used'
    case 3: return 'status-canceled'
    case 4: return 'status-rejected'
    default: return ''
  }
}

// 根据状态获取标签类型
const getStatusType = (status) => {
  switch (status) {
    case 0: return 'info'
    case 1: return 'success'
    case 2: return 'primary'
    case 3: return 'danger'
    case 4: return 'warning'
    default: return 'info'
  }
}

// 根据状态获取文本
const getStatusText = (status) => {
  switch (status) {
    case 0: return '待审核'
    case 1: return '已确认'
    case 2: return '已使用'
    case 3: return '已取消'
    case 4: return '已拒绝'
    default: return '未知'
  }
}

// 处理手动入场
const handleManualEntry = async (reservation) => {
  try {
    await ElMessageBox.confirm('确认为该预约车辆办理入场？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    // 创建入场记录
    const parkingRecordData = {
      vehicleId: reservation.vehicleId,
      plateNumber: reservation.plateNumber,
      parkingSpaceId: reservation.parkingSpaceId,
      spaceNumber: reservation.spaceNumber,
      parkingLotId: reservation.parkingLotId,
      parkingLotName: reservation.parkingLotName,
      entryTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
      reservationId: reservation.id
    }

    console.log('创建入场记录:', parkingRecordData)
    const res = await createParkingRecord(parkingRecordData)

    if (res.code === 200) {
      ElMessage.success('入场登记成功')
      // 刷新预约列表
      await fetchReservations()
    } else {
      ElMessage.error(res.message || '入场登记失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('入场登记失败:', error)
      ElMessage.error(error.response?.data?.message || error.message || '入场登记失败')
    }
  }
}

// 监听路由参数变化
watch(() => route.query, (query) => {
  if (query.spaceId && query.spaceNumber) {
    preSelectedSpace.value = {
      id: parseInt(query.spaceId),
      space_number: query.spaceNumber
    }
  }
}, { immediate: true })

// 组件挂载时获取数据
onMounted(async () => {
  try {
    await Promise.all([
      fetchVehicles(),
      fetchParkingLots(),
      fetchReservations(),
      fetchStats()
    ])
  } catch (error) {
    console.error('初始化数据失败', error)
  }
})
</script>

<style scoped>
.reservation-container {
  min-height: calc(100vh - 180px);
}

.page-header-card {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #3f51b5, #3949ab);
  color: white;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title h2 {
  margin: 0;
  font-size: 24px;
}

.page-title p {
  margin: 8px 0 0;
  opacity: 0.8;
  font-size: 14px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.form-card {
  margin-bottom: 20px;
}

.fee-estimate {
  margin: 15px 0;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fee-amount {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}

.list-card {
  margin-bottom: 20px;
  min-height: 300px;
}

.filter-actions {
  display: flex;
  align-items: center;
}

.reservation-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.reservation-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px;
  transition: all 0.3s ease;
}

.reservation-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.item-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.space-number {
  font-size: 16px;
  font-weight: bold;
}

.plate-number {
  font-size: 14px;
  color: #606266;
}

.item-time {
  font-size: 14px;
  color: #909399;
}

.item-content {
  display: flex;
  justify-content: space-between;
}

.item-details {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.detail-item {
  display: flex;
  gap: 8px;
}

.detail-label {
  color: #909399;
  font-size: 14px;
}

.detail-value {
  font-size: 14px;
  color: #303133;
}

.item-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-width: 100px;
}

.status-pending {
  border-left: 3px solid #909399;
}

.status-confirmed {
  border-left: 3px solid #67c23a;
}

.status-used {
  border-left: 3px solid #409eff;
}

.status-canceled {
  border-left: 3px solid #f56c6c;
}

.status-rejected {
  border-left: 3px solid #e6a23c;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 统计卡片样式 */
.stats-card {
  margin-bottom: 20px;
}

.stats-overview {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.stat-box {
  text-align: center;
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
  flex: 1;
  min-width: 100px;
  margin: 0 10px 10px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stat-box.total {
  background-color: #ecf5ff;
}

.stat-box.total .stat-value {
  color: #409eff;
}

.stat-box.pending {
  background-color: #f4f4f5;
}

.stat-box.pending .stat-value {
  color: #909399;
}

.stat-box.confirmed {
  background-color: #f0f9eb;
}

.stat-box.confirmed .stat-value {
  color: #67c23a;
}

.stat-box.upcoming {
  background-color: #fdf6ec;
}

.stat-box.upcoming .stat-value {
  color: #e6a23c;
}

.stat-box.used {
  background-color: #ecf5ff;
}

.stat-box.used .stat-value {
  color: #409eff;
}

.stat-box.canceled {
  background-color: #fef0f0;
}

.stat-box.canceled .stat-value {
  color: #f56c6c;
}

.stat-box.rejected {
  background-color: #fef0f0;
}

.stat-box.rejected .stat-value {
  color: #f56c6c;
}

@media screen and (max-width: 768px) {
  .item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .item-content {
    flex-direction: column;
  }
  
  .item-details {
    grid-template-columns: 1fr;
    margin-bottom: 15px;
  }
  
  .item-actions {
    flex-direction: row;
    justify-content: flex-start;
  }
  
  .filter-actions {
    margin-top: 10px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style> 